<!DOCTYPE html>
<!--[if IE 8]>         <html class="ie8"> <![endif]-->
<!--[if IE 9]>         <html class="ie9 gt-ie8"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="gt-ie8 gt-ie9 not-ie"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- icon -->
	<link href="" rel="icon" type="image/x-icon">
    <title>好料购-首页</title>

    <!-- Bootstrap -->
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<!-- Common -->
	<link href="../css/common.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	<style>
		

.yzy-nav li, .transition {
    vertical-align: top;
    display: inline-block;
    *float: left;
    margin-right: 23px;
    *margin-right: 26px;
    position: relative;
    z-index: 2;
    height: 65px;
    margin-top: 15px
}

.transition {
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
	top: 0;
	left: 0;
}

.yzy-nav .nav-son .category-drop-down,.my-ul .transition {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    opacity: 0;
    *display: none
}

.yzy-nav .list:hover .category-drop-down,.my-ul li:hover .transition {
    margin-top: 100px;
    opacity: 1;
    *display: block;
	color: red;
}

.hlg-dropdown-menu {
	-webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    opacity: 0;
    *display: none;
	position: absolute;
	top: 0;
}
.dropdown:hover .hlg-dropdown-menu {
	margin-top: 100px;
	opacity: 1;
	*display: block;
}

.test {
	width: 100%;
	height: 100px;
	background-color: #fff;
}
.test:hover {
	background-color:rgba(99,99,99,.3);
}


	</style>
  </head>
  <body>
    <nav class="navbar navbar-default hlg-navbar">
	  <div class="container">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
		  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
			<span class="sr-only">Toggle navigation</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		  </button>
		  <a class="navbar-brand hlg-navbar-brand" href="index.html"><img src="../img/logo.png"></a>
		</div>

		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		  <ul class="nav navbar-nav hlg-navbar-nav">
			<li class="active"><a href="index.html">首页 <span class="sr-only">(current)</span></a></li>
			<li class="dropdown">
			  <a href="#" role="button" aria-expanded="false">浏览项目 <span class="caret"></span></a>
			  <ul class="hlg-dropdown-menu" role="menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
				<li class="divider"></li>
				<li><a href="#">One more separated link</a></li>
			  </ul>
			</li>
			<li><a href="#">新手帮助</a></li>
		  </ul>
		</div><!-- /.navbar-collapse -->
	  </div><!-- /.container-fluid -->
	</nav>

	<div class="dropdown">
	  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
		Dropdown
		<span class="caret"></span>
	  </button>
	  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
	  </ul>
	</div>
	
	<div class="test">
		
	</div>
	
	<div>
		<ul>
			<li>li</li>
			<li style="vertical-align: top;
display: inline-block;
margin-right: 23px;
position: relative;
z-index: 2;
height: 65px;
margin-top: 15px;">
				<a>li-2</a>
				<div>
					<ul>
						<li>son-li</li>
					</ul>
				</div>
			</li>
		</ul>
	</div>
	<!--
	<div class="yzy-head" id="header" data-spm="a31cv">
		<div class="layout">
			<a class="yzy-logo" alt="淘宝众筹" href="http://hi.taobao.com/market/hi/home.php">淘宝众筹</a>
			<div class="yzy-nav">
				<ul id="J_hi_nav">
					<li class="home" data-item="nav">
						<a class="link" href="http://hi.taobao.com/market/hi/home.php" target="_blank">首页</a>
					</li>
					<li class="list" data-item="nav">
						<a class="link" href="http://hi.taobao.com/market/hi/list.php" target="_blank">浏览项目<b class="c-icon"></b></a>
						<div class="nav-son" style="">
							<ul class="J_navallType category-drop-down"><li class="first"><a class="category-121278001" href="http://hi.taobao.com/market/hi/list.php#type=121278001" target="_blank"><b class="a-icon"></b>影音</a></li><li><a class="category-121280001" href="http://hi.taobao.com/market/hi/list.php#type=121280001" target="_blank">公益</a></li><li><a class="category-121274002" href="http://hi.taobao.com/market/hi/list.php#type=121274002" target="_blank">书籍</a></li><li><a class="category-121284001" href="http://hi.taobao.com/market/hi/list.php#type=121284001" target="_blank">娱乐</a></li><li><a class="category-121288001" href="http://hi.taobao.com/market/hi/list.php#type=121288001" target="_blank">科技</a></li><li><a class="category-121292001" href="http://hi.taobao.com/market/hi/list.php#type=121292001" target="_blank">设计</a></li><li><a class="category-122018001" href="http://hi.taobao.com/market/hi/list.php#type=122018001" target="_blank">动漫</a></li><li><a class="category-122020001" href="http://hi.taobao.com/market/hi/list.php#type=122020001" target="_blank">游戏</a></li><li><a class="category-123330001" href="http://hi.taobao.com/market/hi/list.php#type=123330001" target="_blank">农业</a></li><li class="last"><a class="category-123332001" href="http://hi.taobao.com/market/hi/list.php#type=123332001" target="_blank">其他</a></li></ul>
						</div>
					</li>
					<li class="myyzy" data-item="nav">
						<a class="link" href="http://start.hi.taobao.com/dream/myproject.htm" target="_blank">我的众筹
						  <b class="c-icon"></b>
					  </a>
						 <div class="nav-son">
						   <ul class="personal-drop-down">
								<li class="first last"><a href="http://start.hi.taobao.com/dream/myproject.htm">我的项目<b class="a-icon"></b></a></li>
							  <li class="last"><a href="http://start.hi.taobao.com/dream/personal.htm ">个人资料</a></li>
							</ul> 
						</div>
					</li>
					<li class="publish" data-item="nav">
						<a class="link" href="http://start.hi.taobao.com/dream/addProject.htm" target="_blank">发起项目</a>
					</li>
					<li class="help" data-item="nav">
						<a class="link" href="http://hi.taobao.com/market/hi/about.php" target="_blank">新手帮助</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	-->
	
	<div class="container">
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
		  <!-- Indicators -->
		  <ol class="carousel-indicators">
			<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			<li data-target="#carousel-example-generic" data-slide-to="1"></li>
			<li data-target="#carousel-example-generic" data-slide-to="2"></li>
		  </ol>

		  <!-- Wrapper for slides -->
		  <div class="carousel-inner" role="listbox">
			<div class="item active">
			  <img src="../img/TB117RnHXXXXXcGXVXXrvcvJFXX-890-384.jpg_q90.jpg" alt="...">
			  <div class="carousel-caption">
				...
			  </div>
			</div>
			<div class="item">
			  <img src="../img/TB117RnHXXXXXcGXVXXrvcvJFXX-890-384.jpg_q90.jpg" alt="...">
			  <div class="carousel-caption">
				...
			  </div>
			</div>
			<div class="item">
			  <img src="../img/TB117RnHXXXXXcGXVXXrvcvJFXX-890-384.jpg_q90.jpg" alt="...">
			  <div class="carousel-caption">
				...
			  </div>
			</div>
		  </div>

		  <!-- Controls -->
		  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		  </a>
		  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		  </a>
		</div>
	</div>
	
	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
		<div class="item active">
		  <img src="..." alt="...">
		  <div class="carousel-caption">
			...
		  </div>
		</div>
		<div class="item">
		  <img src="..." alt="...">
		  <div class="carousel-caption">
			...
		  </div>
		</div>
		...
	  </div>

	  <!-- Controls -->
	  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	  </a>
	  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	  </a>
	</div>
	
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../vendor/jquery/jquery-1.11.0.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
	<script>
		/*
		$(function() {
			$('.hlg-navbar-nav').find('a').on('mouseover', function() {
				$('.dropdown-menu').show();
				$('.dropdown-menu').height('0px');
				$('.dropdown-menu').animate({height:'250px'});
			});
			$('.hlg-navbar-nav').find('a').on('mouseout', function() {
				$('.dropdown-menu').animate({});
				$('.dropdown-menu').hide();
			});
		});*/
	</script>
  </body>
</html>